<template>
	<view class="p-y-10">

		<view class="card">
			<view class="card-title f-48 f-bold t-c">填写报修表单</view>
			<view class="p-y-20 f-36 f-bold">损坏物品</view>
			<input v-model="form.name" class="input-box" type="text" placeholder="请填写损坏物品">
			<view class="p-y-20 f-36 f-bold">宿舍楼栋及宿舍号</view>
			<input v-model="form.position" class="input-box" type="text" placeholder="请填写宿舍楼栋及宿舍号">
			<view class="p-y-20 f-36 f-bold">损坏情况</view>
			<view class="card-main">
				<textarea v-model="form.remark" maxlength="500" :auto-focus="false"
					placeholder="请详细描述损坏具体情况,方便工人师傅更快维修"></textarea>
			</view>
			<view @click="goSubmit" class="card-buttom t-c f-36 f-w800 col-f"
				:class="canSubmit?'card-buttom-active':''">
				提交报修表单</view>
		</view>
	</view>
</template>

<script>
	import {
		postFixDetail
	} from '@/api/index.js'
	export default {
		computed: {
			canSubmit() {
				let a = 0
				for (let key in this.form) {
					this.form[key].trim().length === 0 ? null : a++
				}
				return a === 3 ? true : false
			}
		},
		data() {
			return {
				form: {
					name: '',
					position: '',
					remark: ''
				},
			}
		},
		methods: {
			async goSubmit() {
				if (!this.canSubmit) {
					return uni.showToast({
						title: '每一项必须填写',
						icon: 'error'
					})
				}
				const res = await postFixDetail(this.form)
				if (res.code === 200) {
					uni.showToast({
						title: '报修成功请等待'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.margin-bottom-12 {
		margin-bottom: 12rpx;
	}

	.input-box {
		height: 70rpx;
		padding: 10rpx 20rpx;
		background: #f5f5f5;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.card {
		margin: 22rpx 30rpx;
		padding: 35rpx 24rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		&-title {
			margin-left: 15rpx;
		}

		&-main {
			padding: 31rpx 20rpx 23rpx;
			height: 380rpx;
			background: #F8F8F8;
			border-radius: 12rpx 12rpx 12rpx 12rpx;

			textarea {
				height: 292rpx;
			}
		}

		&-buttom {
			margin: 53rpx 145rpx 16rpx;
			height: 80rpx;
			background-color: #999;
			line-height: 80rpx;
			border-radius: 82rpx 82rpx 82rpx 82rpx;

			&-active {
				background-color: #55aaff;
			}
		}
	}
</style>
